<template>
	<view>

		<!-- <cu-custom bgColor="bg-gradual-green" :isBack="true">
			<text slot="content">确认订单</text>
		</cu-custom> -->
		
		
		<!-- 地址簿选择 -->
		<view class="address-box arror" @tap="selectAddress()">
			<!-- 已选地址 -->
			<view class="address-item " v-if="hasAddress" >
				
				<view class="xc-flex-1">
				
					<view class="text-cut xc-text-16 margin-bottom-xs">
						{{address.xm}} 
					<text class="xc-text-14 text-blue margin-left-sm">
					<text class="cuIcon-dianhua"></text>
						{{address.tel}}
					</text>
					</view>
					<view class="text-cut text-gray xc-text-14"> 
						{{address.area_str}}
					</view>
				</view>
			</view>
		
			<!-- 没有地址 -->
			<view class="xc-padding xc-text-c xc-text-16 xc-c-999" v-if="!hasAddress">请选择收货地址</view>
			
			<view class="xc-arror"></view>
			<view class="address-bg-img"></view>
		</view>
		
		<!-- 商品列表 -->
	
		<view class="order-list xc-margin-t">
			<view class="xc-padding xc-border-b">商品信息</view>
			<view class="order-item" v-for="(good,good_index) of list" :key="good_index">

				<view class="order-item-img" >
				<image src="../../static/images/470x470.jpg" class="cu-avatar xc-w-80 xc-h-80"></image>	
					
				</view>
				
				<view class="order-item-body">
					<view class="text-black margin-bottom-xs">
						<view class="text-cut">商品{{good.title}}</view>
					</view>
					<view class="text-gray text-sm flex margin-bottom-xs">
						<view class="text-cut">黑色</view>
					</view>
					<view class="xc-flex xc-flex-row-between">
					<view class="text-red ">
						<text class="text-xs ">￥</text>55
					</view>
					<view >x 1</view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="order-item justify-between">
			<view>订单备注</view>
			<view class="xc-margin-l-10 xc-flex-1" ><input type="text" class="xc-w-100p xc-text-14"  placeholder="请输入订单备注, 可选" /></view>
		</view>
		
		
		<view class="xc-margin-t">
		
		<view class="order-item justify-between">
			<view>商品金额</view>
			<view >￥45</view>
		</view>
		<view class="order-item justify-between">
			<view>活动优惠</view>
			<view ><text class="xc-c-red">-￥5</text></view>
		</view>
		<view class="order-item justify-between">
			<view>运费</view>
			<view ><text class="xc-c-red">+￥0</text></view>
		</view>
		</view>
		
		<!-- 购买 -->
		<view class="cu-bar bg-white tabbar xc-bottom-bar align-stretch">
			<view class="xc-padding xc-flex-1 xc-flex xc-flex-col-center xc-flex-row-between" >
			
			
				<view class="xc-margin-r">合计：<text class="xc-c-red xc-text-14">￥</text><text class="xc-c-red xc-text-18">5000</text></view>
			</view>
		
			
			<view class="bg-green xc-flex xc-flex-col-center xc-flex-row-center text-white xc-w-120" @tap="submitOrder">支付订单</view>
		</view>
	</view>
</template>

<script>
	// import config from "../../config.js"
	// import util from "../../common/util.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				hasAddress:false,
				address:{
					
				},
				
				chkAll:false,
				list: [{
						id: 1,
						title:"产品1",
						check:1,
						img:"",
						price:10,
						count:2,
						url: ""
					},
					{
						id: 2,
						title:"产品2",
						check:0,
						price:33,
						count:1,
						url: ""
					}
				],
				templateAll:`
				
<template>
	<view>

		<!-- <cu-custom bgColor="bg-gradual-green" :isBack="true">
			<text slot="content">确认订单</text>
		</cu-custom> -->
		
		
		<!-- 地址簿选择 -->
		<view class="address-box arror" @tap="selectAddress()">
			<!-- 已选地址 -->
			<view class="address-item " v-if="hasAddress" >
				
				<view class="xc-flex-1">
				
					<view class="text-cut xc-text-16 margin-bottom-xs">
						{{address.xm}} 
					<text class="xc-text-14 text-blue margin-left-sm">
					<text class="cuIcon-dianhua"></text>
						{{address.tel}}
					</text>
					</view>
					<view class="text-cut text-gray xc-text-14"> 
						{{address.area_str}}
					</view>
				</view>
			</view>
		
			<!-- 没有地址 -->
			<view class="xc-padding xc-text-c xc-text-16 xc-c-999" v-if="!hasAddress">请选择收货地址</view>
			
			<view class="xc-arror"></view>
			<view class="address-bg-img"></view>
		</view>
		
		<!-- 商品列表 -->
	
		<view class="order-list xc-margin-t">
			<view class="xc-padding xc-border-b">商品信息</view>
			<view class="order-item" v-for="(good,good_index) of list" :key="good_index">

				<view class="order-item-img" >
				<image src="../../static/images/470x470.jpg" class="cu-avatar xc-w-80 xc-h-80"></image>	
					
				</view>
				
				<view class="order-item-body">
					<view class="text-black margin-bottom-xs">
						<view class="text-cut">商品{{good.title}}</view>
					</view>
					<view class="text-gray text-sm flex margin-bottom-xs">
						<view class="text-cut">黑色</view>
					</view>
					<view class="xc-flex xc-flex-row-between">
					<view class="text-red ">
						<text class="text-xs ">￥</text>55
					</view>
					<view >x 1</view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="order-item justify-between">
			<view>订单备注</view>
			<view class="xc-margin-l-10 xc-flex-1" ><input type="text" class="xc-w-100p xc-text-14"  placeholder="请输入订单备注, 可选" /></view>
		</view>
		
		
		<view class="xc-margin-t">
		
		<view class="order-item justify-between">
			<view>商品金额</view>
			<view >￥45</view>
		</view>
		<view class="order-item justify-between">
			<view>活动优惠</view>
			<view ><text class="xc-c-red">-￥5</text></view>
		</view>
		<view class="order-item justify-between">
			<view>运费</view>
			<view ><text class="xc-c-red">+￥0</text></view>
		</view>
		</view>
		
		<!-- 购买 -->
		<view class="cu-bar bg-white tabbar xc-bottom-bar align-stretch">
			<view class="xc-padding xc-flex-1 xc-flex xc-flex-col-center xc-flex-row-between" >
			
			
				<view class="xc-margin-r">合计：<text class="xc-c-red xc-text-14">￥</text><text class="xc-c-red xc-text-18">5000</text></view>
			</view>
		
			
			<view class="bg-green xc-flex xc-flex-col-center xc-flex-row-center text-white xc-w-120" @tap="submitOrder">支付订单</view>
		</view>
	</view>
</template>

<script>
	// import config from "../../config.js"
	// import util from "../../common/util.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				hasAddress:false,
				address:{
					
				},
				
				chkAll:false,
				list: [{
						id: 1,
						title:"产品1",
						check:1,
						img:"",
						price:10,
						count:2,
						url: ""
					},
					{
						id: 2,
						title:"产品2",
						check:0,
						price:33,
						count:1,
						url: ""
					}
				]
			}
		},
		onShow() {
			let that = this;
			that.checkLogin(true);
			// if (!that.hasLogin){
				
			// }
		},
		methods: {
			// ...mapMutations(['checkLogin']),
			// 选中地址
			selectAddress(){
				uni.navigateTo({
					url:'../ucenter/address_list?type=1'
				})
			},
			// 获取选中地址
			getAddress(item){
				this.hasAddress = true;
				this.address = {...item};
			},
			//提交订单
			submitOrder(){
				uni.redirectTo({
					url:'pay?orderId=1'
				})
			}
		}
	}
</ script>

<style>
.order-list{ background-color: #FFFFFF;}
.order-item{ display: flex; padding: 20rpx; background-color: #FFF; border-bottom: 1px solid #eee;}
.order-item-body{ flex:1;}
.order-item-img { width: 160rpx; height: 160rpx; border-radius: 14rpx; overflow: hidden; margin-right: 16rpx;}

.address-box{ padding: 30rpx 30rpx 40rpx 30rpx; position: relative; background-color: #FFFFFF;}
.address-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

.xc-arror{ position: absolute; z-index: 5; content: 0; right: 20rpx; top: 50%; transform: translate(0,-50%) rotate(45deg); width: 20rpx; height: 20rpx; border-right: 4rpx solid #ddd ; border-top: 4rpx solid #ddd ;  }
</style>

				`
			}
		},
		onShow() {
			let that = this;
			that.checkLogin(true);
			// if (!that.hasLogin){
				
			// }
		},
		methods: {
			// ...mapMutations(['checkLogin']),
			// 选中地址
			selectAddress(){
				uni.navigateTo({
					url:'../ucenter/address_list?type=1'
				})
			},
			// 获取选中地址
			getAddress(item){
				this.hasAddress = true;
				this.address = {...item};
			},
			//提交订单
			submitOrder(){
				uni.redirectTo({
					url:'pay?orderId=1'
				})
			}
		}
	}
</script>

<style>
.order-list{ background-color: #FFFFFF;}
.order-item{ display: flex; padding: 20rpx; background-color: #FFF; border-bottom: 1px solid #eee;}
.order-item-body{ flex:1;}
.order-item-img { width: 160rpx; height: 160rpx; border-radius: 14rpx; overflow: hidden; margin-right: 16rpx;}

.address-box{ padding: 30rpx 30rpx 40rpx 30rpx; position: relative; background-color: #FFFFFF;}
.address-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

.xc-arror{ position: absolute; z-index: 5; content: 0; right: 20rpx; top: 50%; transform: translate(0,-50%) rotate(45deg); width: 20rpx; height: 20rpx; border-right: 4rpx solid #ddd ; border-top: 4rpx solid #ddd ;  }
</style>
